<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>labubu's 个人网站</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="css/style.css">
    
</head>
<body class="d-flex flex-column min-vh-100">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#" id="logo"><i class="bi-bell"></i>&nbsp;Labubu</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active"><a href="#" class="nav-link">首页</a></li>
                <li class="nav-item"><a href="htmls/course.html" class="nav-link">我的课表</a></li>
                <li class="nav-item"><a href="htmls/login.html" class="nav-link" id="menu_login">登录</a></li>
                <li class="nav-item"><a href="htmls/reg.html" class="nav-link">注册</a></li>
            </ul>
        </div>
    </nav>

    <!-- 主体内容 -->
    <main class="container my-5 flex-grow-1">
        <div class="card shadow-lg">
            <div class="row no-gutters">
                <!-- 图片区域 -->
                <div class="col-md-4">
                    <img src="images/labubu2.jpg" alt="labubu" class="img-fluid rounded-start">
                </div>
                <!-- 简介区域 -->
                <div class="col-md-8">
                    <div class="card-body">
                        <h3 class="card-title mb-4">个人简介</h3>
                        <p class="card-text lead">
                            Labubu是由中国香港艺术家龙家升（Kasing Lung）创作的北欧森林精灵形象，属于THE MONSTERS精灵天团的成员。它们大约有100只，身高与猫差不多，拥有直立的尖耳朵、9颗尖尖的小獠牙，笑起来露出牙齿的样子十分俏皮。Labubu性格调皮又乐观，对任何事物都充满好奇心，但内心善良勇敢。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="mt-auto bg-light py-3">
        <div class="container text-center">
            <a href="mailto:labubu@hznu.edu.cn" class="btn btn-outline-secondary footer-color border-clear">联系我</a>
        </div>
    </footer>

    <!-- Bootstrap JS 及其依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 检查登录状态
        function checkLoginStatus() {
            const isLogined = localStorage.getItem('isLogined');
            const menuLogin = document.getElementById('menu_login');
            if (isLogined === '1') {
                menuLogin.textContent = '退出登录';
                menuLogin.href = '#';
                menuLogin.addEventListener('click', function(e) {
                    e.preventDefault();
                    localStorage.removeItem('isLogined');
                    window.location.href = 'openModal.html';
                });
            } else {
                menuLogin.textContent = '登录';
                menuLogin.href = 'openModal.html';
            }
        }
        
        // 初始化时检查登录状态
        document.addEventListener('DOMContentLoaded', function() {
            checkLoginStatus();
        });
    </script>
</body>
</html>
